<template>
  <div class="order-before" v-loading="loading1">
    <div class="header-wrapper">
      <div class="table-content">
        桌台号：<span class="table-num">{{tableName}}</span>
      </div>
      <div class="user-content" @click="chooseNum">
        用餐人数：<span class="user-num">{{userNum}} <span style="color:#f76763;font-weight:700;">></span></span>
      </div>
      <div class="desc-content">
        备注：
        <el-input class="desc" v-model="desc" placeholder="请输入您的需求" maxlength="20"></el-input>
      </div>
    </div>
    <div class="content-wrapper">
      <div class="header">
        <span class="title">所选菜品：</span>
        <span class="num">共{{totalCount}}道菜</span>
      </div>
      <div class="content">
        <ul>
          <span v-for="(food,index) in selectFoods" :key="index">
            <span v-if="food.chooseSpecs===undefined">
              <li class="food">
                <span class="name">{{food.foodsname}}</span>
                <span class="cartaontrol-wrapper">
                  <div class="cartcontrol">
                    <!--<transition name="move">-->
                    <!--<div class="cart-decrease" @click="decreaseCart(food)" v-show="food.count>0">-->
                    <!--<img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">-->
                    <!--</div>-->
                    <!--</transition>-->
                    <div class="cart-count" v-show="food.count>0">{{food.count}}份</div>
                    <!--<div class="cart-add" @click="addCart(food)">-->
                    <!--<img width="20" height="20" src="../assets/plus1.png" alt="">-->
                    <!--</div>-->
                  </div>
                  <!--<CartControl :food="food"-->
                  <!--:all-goods="allGoods"-->
                  <!--:total-count="totalCount"-->
                  <!--@closefold="closeFold"-->
                  <!--&gt;</CartControl>-->
                </span>
                <span class="price">
                  <span v-for="(item,key,index1) in JSON.parse(food.specifications)[0]"
                        :key="index1">¥{{item/100}}</span>
                </span>
              </li>
            </span>
            <span v-if="food.chooseSpecs!==undefined">
              <li class="food" v-show="item[0]>0" v-for="(item,key,index1) in food.chooseSpecs" :key="index1">
                <span class="name">{{food.foodsname}}<span style="color:#f76763;">({{item[1]}})</span></span>
                <span class="cartaontrol-wrapper">
                  <div class="cartcontrol">
                    <!--<transition name="move">-->
                    <!--<div class="cart-decrease" @click="decreaseCart1(food,key)">-->
                    <!--<img class="inner" width="20" height="20" src="../assets/minus1.png" alt="">-->
                    <!--</div>-->
                    <!--</transition>-->
                    <div class="cart-count">{{item[0]}}份</div>
                    <!--<div class="cart-add" @click="addCart1(food,key)">-->
                    <!--<img width="20" height="20" src="../assets/plus1.png" alt="">-->
                    <!--</div>-->
                  </div>
                </span>
                <span class="price">
                  <span>¥{{item[2]/100}}</span>
                </span>
              </li>
            </span>
          </span>
          <!--<li class="food-list">111</li>-->
        </ul>
      </div>
    </div>
    <div class="foot-wrapper">
      <span class="price-wrapper">总计：<span class="price">¥{{totalPrice/100}}</span></span>
      <span class="continue-order" @click="continueOrder">继续点餐</span>
      <span class="order-btn" @click="goOrder" :class="{'can-next':canNext}">下 单</span>
    </div>
    <div class="choose-num" :class="{'choosenum':choosenum}">
      <div class="num-content">
        <div class="num"
             v-for="(item,index) in numberType"
             :key="index"
             @click="click_num(index)"
             :class="{'num-on-class':index===numOnClass*1}"
        >
          {{ item }}
        </div>
      </div>
      <div class="ok" @click="okNum">确 定</div>
    </div>
    <div class="list-mask" @click="clickMask" v-show="mask"></div>
    <div class="cant-click" v-show="cantClick">餐桌状态已改变 <br> 请重新扫码入</div>
    <div class="success" @click="clickSuccess" v-show="success">
      <div class="status">
        <div class="status_desc">{{statusDesc}}</div>
      </div>
      <div class="delete1"></div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import axios from 'axios';
  import {basePath} from '../api/api_const';
  import Refresh from './Refresh';

  export default {
    inject: ['reload'],
    name: 'OrderBefore',
    data() {
      return {
        desc: localStorage.getItem('desc'),
        allGoods: [],
        numberType: [],
        tableName: localStorage.getItem('tablename'),
        numOnClass: localStorage.getItem('num-on-index'),
        userNum: localStorage.getItem('num-on-index') * 1 + 1,
        choosenum: false, // 默认不显示规格
        success: false, // 成功提示
        statusDesc: '',
        is_add: 0,
        is_order: 1, // 限制只能点击一次
        mask: false, // 默认隐藏黑色背景
        cantClick: false, // 中间购物车没有该桌数据不能继续点餐
        loading1: false,
        websock: null
      }
    },
    components: {
      Refresh
    },
    computed: {
      selectFoods() {
        let foods = [];
        this.allGoods.forEach((good) => {
          if (good.count) {
            foods.push(good);
          }
        });
        return foods;
      },
      totalCount() {
        let count = 0;
        this.selectFoods.forEach((food) => {
          count += food.count;
        });
        return count;
      },
      totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          if (food.chooseSpecs !== undefined) {
            for (let i = 0; i < food.chooseSpecs.length; i++) {
              total += food.chooseSpecs[i][0] * food.chooseSpecs[i][2];
            }
          } else {
            for (let k in JSON.parse(food.specifications)[0]) {
              let thisGoodPrice = JSON.parse(food.specifications)[0][k];
              total += thisGoodPrice * food.count;
            }
          }
        });
        return total;
      },
      canNext() {
        let can = false;
        if (this.totalCount) {
          can = true;
        }
        return can;
      }
    },
    watch: {
      // 监听输入框searchName值的变化
      desc() {
        localStorage.setItem('desc', this.desc);
      }
    },
    methods: {
      // 初始化数据查询该门店下出所有goods
      getAllGoods() {
        this.loading1 = true;
        axios({
          method: 'get',
          url: basePath + 'xzg_order/query_foods_order?storeId=' + localStorage.getItem('storeid') + '&static_up_and_down=上市&s=order_sort'
        })
          .then((result) => {
            let res = JSON.parse(result.request.response);
            this.allGoods = res.response.data;
            this.allGoods.forEach((good) => {
              if (good.specifications[0] === '{') {
                good.specifications = '[' + good.specifications + ']';
              } else {
                // 对规格进行排序
                let spec = JSON.parse(good.specifications);
                let specPriceArr = []; // 所有价格放入数组
                spec.forEach((item, key, spec) => {
                  for (let key1 in item) {
                    specPriceArr.push(item[key1]);
                  }
                });
                // 将数组中价格排序
                for (let i = 0; i < specPriceArr.length; i++) {
                  for (let j = i + 1; j < specPriceArr.length; j++) {
                    if (specPriceArr[i] > specPriceArr[j]) {
                      let tmp = specPriceArr[i];
                      specPriceArr[i] = specPriceArr[j];
                      specPriceArr[j] = tmp;
                    }
                  }
                }
                let specArr = [];// 从小到大排序后的数组
                for (let ii = 0; ii < specPriceArr.length; ii++) {
                  spec.forEach((item, key, spec) => {
                    for (let key1 in item) {
                      if (item[key1] === specPriceArr[ii]) {
                        specArr.push(item)
                      }
                    }
                  });
                }
                good.specifications = JSON.stringify(specArr);
              }
            });
            // localStorage.setItem('localAllGoods', JSON.stringify([]));
            // 将之前点的菜赋值到新查的菜品上
            // if (localStorage.getItem(localStorage.getItem('tableid') + '_localAllGoods') !== null) {
            //   JSON.parse(localStorage.getItem(localStorage.getItem('tableid') + '_localAllGoods')).forEach((val) => {
            //     if (val.count) {
            //       this.allGoods.forEach((key2, i2, val2) => {
            //         if (val.id === key2.id) {
            //           Vue.set(this.allGoods[i2], 'count', val.count);
            //           Vue.set(this.allGoods[i2], 'chooseSpecs', val.chooseSpecs);
            //           Vue.set(this.allGoods[i2], 'nickname', val.nickname);
            //           Vue.set(this.allGoods[i2], 'headimgurl', val.headimgurl);
            //           Vue.set(this.allGoods[i2], 'openid', val.openid);
            //         }
            //       })
            //     }
            //   });
            // } else {
            //   localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
            // }
            axios({
              method: 'get',
              url: basePath + 'xzg_order/add_order_info',
              params: {
                table_num: localStorage.getItem('tableid')
              }
            })
              .then((data) => {
                console.log(data);
                console.log('中间购物车中的数据');
                let res = JSON.parse(data.request.response);
                if (res.response.data.length > 0) {
                  JSON.parse(decodeURIComponent(res.response.data[0].order_info)).forEach((val) => {
                    if (val.count) {
                      this.allGoods.forEach((key2, i2, val2) => {
                        if (val.id === key2.id) {
                          Vue.set(this.allGoods[i2], 'count', val.count);
                          Vue.set(this.allGoods[i2], 'chooseSpecs', val.chooseSpecs);
                          Vue.set(this.allGoods[i2], 'nickname', val.nickname);
                          Vue.set(this.allGoods[i2], 'headimgurl', val.headimgurl);
                          Vue.set(this.allGoods[i2], 'openid', val.openid);
                        }
                      });
                    }
                  });
                  console.log(res.response.data[0].customer_num);
                  localStorage.setItem('num-on-index', res.response.data[0].customer_num);
                  this.numOnClass = localStorage.getItem('num-on-index');
                  this.userNum = localStorage.getItem('num-on-index') * 1 + 1;
                }
              })
              .catch(function (err) {
                console.log(err);
              });
            localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
            this.loading1 = false;
            console.log(this.allGoods);
            console.log('下单页面--上面显示所有商品');
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 点击继续点餐跳到点餐页
      continueOrder() {
        this.$router.push('/goods');
      },
      // 增加（没规格）
      addCart(food) {
        if (!food.count) {
          Vue.set(food, 'count', 1);
        } else {
          food.count++;
        }
        localStorage.setItem('localAllGoods', JSON.stringify(this.allGoods));
      },
      // 减少（没规格）
      decreaseCart(food) {
        if (food.count) {
          food.count--;
        }
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        if (this.totalCount === 0) {
          this.fold = false;
          this.mask = false;
        }
      },
      // 增加（有规格）
      addCart1(food, key) {
        food.count++;
        food.chooseSpecs[key][0]++;
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
      },
      // 减少（有规格）
      decreaseCart1(food, key) {
        if (food.count) {
          food.count--;
          if (food.chooseSpecs[key][0] === 1) {
            food.chooseSpecs.splice(key, 1);
          } else {
            food.chooseSpecs[key][0]--;
          }
        }
        localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
        if (this.totalCount === 0) {
          this.fold = false;
          this.mask = false;
        }
      },
      // 接受子组件传来id展示规格
      chooseNum() {
        this.choosenum = true;
        this.mask = true;
      },
      // 隐藏面具-黑色背景
      clickMask() {
        this.numOnClass = localStorage.getItem('num-on-index'); // 恢复默认选中的人数
        this.mask = false;
        this.choosenum = false;
      },
      // 关闭下单成功或加菜成功提示
      clickSuccess() {
        this.success = false;
        this.$router.push('/order');
      },
      // 用于遍历人数
      number_type() {
        for (let i = 1; i <= 12; i++) {
          this.numberType.push(i)
        }
      },
      // 点击人数事件
      click_num(index) {
        this.numOnClass = index;
      },
      // 确定选中人数
      okNum() {
        this.userNum = this.numOnClass * 1 + 1;
        localStorage.setItem('num-on-index', this.numOnClass);

        // 修改中间购物车
        axios({
          method: 'post',
          url: basePath + 'xzg_order/update_order_info',
          data: {
            table_num: localStorage.getItem('tableid'),
            order_info: encodeURIComponent(JSON.stringify(this.selectFoods)),
            customer_num: localStorage.getItem('num-on-index')
          }
        })
          .then((data2) => {
            let res = JSON.parse(data2.request.response);
            console.log(res);
            if (res.response.data === 'false') {
              this.cantClick = true;
              // alert('餐桌状态已改变请重新扫码进入');
            } else {
              console.log('修改');
            }
          })
          .catch(function (err) {
            console.log(err);
          });

        this.mask = false;
        this.choosenum = false;
      },
      // 下单
      goOrder() {
        // 查询该桌的订单状态
        axios({
          method: 'post',
          url: basePath + 'xzg_order/query_order',
          data: {
            table_num: localStorage.getItem('tableid')
          }
        })
          .then((data) => {
            let res = JSON.parse(data.request.response).response.data;
            if (res.order_static === '待支付') {
              if (confirm('已有待支付订单请先支付完再下单')) {
                this.$router.push('/paypage');
              }
            } else {
              if (!this.desc) {
                this.desc = '';
              }
              if (!this.totalCount) {
                return;
              }
              if (this.is_order === 1) {
                this.is_order = 0;
              } else {
                return;
              }
              // 判断该桌是否有订单
              axios({
                method: 'post',
                url: basePath + 'xzg_order/query_order',
                data: {
                  table_num: localStorage.getItem('tableid')
                }
              })
                .then((data) => {
                  let ress = JSON.parse(data.request.response).response.data;
                  console.log(ress);
                  if (ress.order_static === '待支付' || ress.order_static === '未支付') {
                    this.is_add = 1;
                  }
                  // if (ress.length > 0) {
                  //   this.is_add = 1;
                  // }
                  // 生成订单或者加菜
                  if (this.is_add === 0) {
                    // 生成订单信息
                    let foods = [];
                    this.selectFoods.forEach((good) => {
                      if (good.chooseSpecs) {
                        good.chooseSpecs.forEach((spec) => {
                          let food = {};
                          food.choosespecs = {};
                          food.foodname = good.foodsname;
                          food.classification = good.classification;
                          food.count = spec[0];
                          food.choosespecs[`${spec[1]}`] = spec[2];
                          food.id = good.id;
                          food.is_retire = 0;
                          food.is_add = 0;
                          foods.push(food);
                        })
                      } else {
                        let food = {};
                        food.choosespecs = {};
                        food.foodname = good.foodsname;
                        food.classification = good.classification;
                        food.count = good.count;
                        food.choosespecs = JSON.parse(good.specifications)[0];
                        food.id = good.id;
                        food.is_retire = 0;
                        food.is_add = 0;
                        foods.push(food);
                      }
                    });
                    // 推送内容
                    let sendStr = '';
                    foods.forEach((foodd) => {
                      for (let key in foodd.choosespecs) {
                        if (key === 'price') {
                          sendStr = sendStr + foodd.foodname + ',';
                        } else {
                          sendStr = sendStr + foodd.foodname + '(' + key + '),';
                        }
                      }
                    });
                    // 生成订单
                    axios({
                      method: 'post',
                      url: basePath + 'xzg_order/add_order',
                      params: {
                        storeId: localStorage.getItem('storeid'),
                        table_num: localStorage.getItem('tableid'),
                        table_name: localStorage.getItem('tablename'),
                        customer_num: this.userNum,
                        remarks: this.desc,
                        order_foods: JSON.stringify(foods),
                        title_money: this.totalPrice,
                        foods_num: this.totalCount
                      }
                    })
                      .then((data) => {
                        let res = JSON.parse(data.request.response);
                        if (res.success === 'true') {
                          // 下单推送
                          axios({
                            method: 'get',
                            url: basePath + 'send/xddordersend',
                            params: {
                              openid: `${localStorage.getItem('openid')}`,
                              orderinfo: `${sendStr}`
                            }
                          }).then((data) => {
                            console.log('推送下单成功');
                          })
                            .catch(function (err) {
                              console.log(err);
                            });
                          // 清空购物车
                          this.selectFoods.forEach((food) => {
                            food.count = 0;
                            food.chooseSpecs = undefined;
                          });
                          localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
                          this.success = true;
                          this.statusDesc = '下单成功';
                          localStorage.setItem('desc', '');
                          this.refreshSelectFoods();
                        } else {
                          alert('下单失败')
                        }
                      })
                      .catch(function (err) {
                        console.log(err);
                      });
                  } else {
                    // 生成加菜信息
                    let foods = [];
                    this.selectFoods.forEach((good) => {
                      if (good.chooseSpecs) {
                        good.chooseSpecs.forEach((spec) => {
                          let food = {};
                          food.choosespecs = {};
                          food.foodname = good.foodsname;
                          food.classification = good.classification;
                          food.count = spec[0];
                          food.choosespecs[`${spec[1]}`] = spec[2];
                          food.id = good.id;
                          food.is_retire = 0;
                          food.is_add = 1;
                          foods.push(food);
                        })
                      } else {
                        let food = {};
                        food.choosespecs = {};
                        food.foodname = good.foodsname;
                        food.classification = good.classification;
                        food.count = good.count;
                        food.choosespecs = JSON.parse(good.specifications)[0];
                        food.id = good.id;
                        food.is_retire = 0;
                        food.is_add = 1;
                        foods.push(food);
                      }
                    });
                    // 推送内容
                    let sendStr = '';
                    foods.forEach((foodd) => {
                      for (let key in foodd.choosespecs) {
                        if (key === 'price') {
                          sendStr = sendStr + foodd.foodname + ',';
                        } else {
                          sendStr = sendStr + foodd.foodname + '(' + key + '),';
                        }
                      }
                    });
                    console.log(sendStr);
                    // 加菜
                    axios({
                      method: 'post',
                      url: basePath + 'xzg_order/add_order_foods',
                      data: {
                        table_num: localStorage.getItem('tableid'),
                        add_foods: JSON.stringify(foods),
                        add_money: this.totalPrice,
                        add_foods_num: this.totalCount,
                        remarks: this.desc
                      }
                    })
                      .then((data) => {
                        let res = JSON.parse(data.request.response);
                        console.log(res);
                        if (res.success === 'true') {
                          // 下单推送
                          axios({
                            method: 'get',
                            url: basePath + 'send/xddordersend',
                            params: {
                              openid: `${localStorage.getItem('openid')}`,
                              orderinfo: `${sendStr}`
                            }
                          }).then((data) => {
                            console.log('推送加菜成功');
                          })
                            .catch(function (err) {
                              console.log(err);
                            });
                          // 清空购物车
                          this.selectFoods.forEach((food) => {
                            food.count = 0;
                            food.chooseSpecs = undefined;
                          });
                          localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
                          this.success = true;
                          this.statusDesc = '加菜成功';
                          localStorage.setItem('desc', '');
                          this.refreshSelectFoods();
                        } else {
                          alert('加菜失败')
                        }
                      })
                      .catch(function (err) {
                        console.log(err);
                      });
                  }
                })
                .catch(function (err) {
                  console.log(err);
                });
            }
          })
          .catch(function (err) {
            console.log(err);
          });
      },
      // 向组发送数据
      refreshSelectFoods(e) {
        let data = encodeURIComponent(JSON.stringify(this.selectFoods));
        let togroup = '{"type":"togroup","group":"' + localStorage.getItem('tableid') + '","openid":"' + localStorage.getItem('openid') + '","data":"' + data + '"}';
        this.websocketsend(togroup);// 给组发送websocket请求
        // 保存点的菜品用来再次进入时更新菜品
        // 修改
        axios({
          method: 'post',
          url: basePath + 'xzg_order/update_order_info',
          data: {
            table_num: localStorage.getItem('tableid'),
            order_info: data,
            customer_num: localStorage.getItem('num-on-index')
          }
        })
          .then((data2) => {
            let res = JSON.parse(data2.request.response);
            console.log(res);
            if (res.response.data === 'false') {
              alert('餐桌状态已改变请重新扫码进入');
            } else {
              console.log('修改');
            }
          })
          .catch(function (err) {
            console.log(err);
          });
        // axios({
        //   method: 'get',
        //   url: basePath + 'xzg_order/add_order_info',
        //   params: {
        //     table_num: localStorage.getItem('tableid')
        //   }
        // })
        //   .then((data1) => {
        //     let res = JSON.parse(data1.request.response);
        //     if (res.response.data.length > 0) {
        //       // 修改
        //       axios({
        //         method: 'post',
        //         url: basePath + 'xzg_order/update_order_info',
        //         data: {
        //           table_num: localStorage.getItem('tableid'),
        //           order_info: data,
        //           customer_num: localStorage.getItem('num-on-index')
        //         }
        //       })
        //         .then((data2) => {
        //           let res = JSON.parse(data2.request.response);
        //           console.log(res);
        //           console.log('修改');
        //         })
        //         .catch(function (err) {
        //           console.log(err);
        //         });
        //     } else {
        //       // 新增
        //       axios({
        //         method: 'post',
        //         url: basePath + 'xzg_order/add_order_info',
        //         data: {
        //           table_num: localStorage.getItem('tableid'),
        //           order_info: data,
        //           customer_num: localStorage.getItem('num-on-index')
        //         }
        //       })
        //         .then((data2) => {
        //           let res = JSON.parse(data2.request.response);
        //           console.log(res);
        //           console.log('新增');
        //         })
        //         .catch(function (err) {
        //           console.log(err);
        //         });
        //     }
        //     console.log(res.response.data.length);
        //   })
        //   .catch(function (err) {
        //     console.log(err);
        //   });
      },
      // websocket
      initWebSocket() { // 初始化weosocket
        const wsuri = 'ws://101.37.202.109:8283';// ws地址
        // const wsuri = 'ws://127.0.0.1:8283';// ws地址
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      },
      // 数据接收
      websocketonmessage(e) {
        let message = JSON.parse('[' + e.data + ']')[0];
        console.log(message);
        switch (message.type) {
          case 'init':
            let join = '{"type":"join","group":"' + localStorage.getItem('tableid') + '","openid":"' + localStorage.getItem('openid') + '"}';
            this.websocketsend(join);// 发送websocket请求 加入socket组
            return;
          case 'togroup':
            let otherOrder = JSON.parse(decodeURIComponent(message.data));
            console.log(otherOrder)
            // 先清空购物车
            this.selectFoods.forEach((food) => {
              food.count = 0;
              food.chooseSpecs = undefined;
              food.nickname = null;
              food.headimgurl = null;
              food.openid = null;
            });
            otherOrder.forEach((good) => {
              this.allGoods.forEach((food, i, val) => {
                if (good.id === food.id) {
                  Vue.set(this.allGoods, i, good);
                }
              })
            });
            localStorage.setItem(localStorage.getItem('tableid') + '_localAllGoods', JSON.stringify(this.allGoods));
            return;
        }
        console.log('欢迎加入' + localStorage.getItem('tableid') + '组');
      },
      // 数据发送
      websocketsend(agentData) {
        this.websock.send(agentData);
      },
      websocketclose(e) { // 关闭
        console.log('connection closed (' + e.code + ')');
      }
    },
    created() {
      this.initWebSocket(); // 初始化websocket 加入组 类似群聊
      this.getAllGoods();// 查询出门店下所有goods初始化
      this.number_type();
    }
  }
</script>

<style lang="scss">
  .order-before {
    position: relative;
    height: 100%;
    background: #fff;
    .header-wrapper {
      .table-content {
        height: 50px;
        line-height: 50px;
        color: #333;
        font-size: 16px;
        padding: 0 16px;
        border-bottom: 1px solid #e2e2e2;
        .table-num {
          display: inline-block;
          float: right;
        }
      }
      .user-content {
        height: 50px;
        line-height: 50px;
        color: #333;
        font-size: 16px;
        padding: 0 16px;
        border-bottom: 1px solid #e2e2e2;
        .user-num {
          display: inline-block;
          float: right;
        }
      }
      .desc-content {
        height: 50px;
        line-height: 50px;
        color: #333;
        font-size: 16px;
        padding: 0 16px;
        border-bottom: 10px solid #f4f4f4;
        .el-input {
          width: 60%;
          float: right;
          .el-input__inner {
            padding: 0;
            border: 0;
            font-size: 16px;
            color: #666;
            text-align: right;
          }
        }
      }
    }
    .content-wrapper {
      position: absolute;
      width: 100%;
      top: 162px;
      bottom: 49px;
      .header {
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding: 0 16px;
        border-bottom: 1px solid #e2e2e2;
        .title {
          display: inline-block;
        }
        .num {
          display: inline-block;
          float: right;
        }
      }
      .content {
        position: absolute;
        width: 100%;
        top: 51px;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /*overflow: auto;*/
        .food-list {
          height: 50px;
          line-height: 50px;
          margin: 0 16px;
          border-bottom: 1px dashed #dcdcdc;
        }
        .food {
          margin: 0 16px;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px dashed #dcdcdc;
          .name {
            display: inline-block;
            color: #666;
            font-size: 18px;
            max-width: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .price {
            display: inline-block;
            float: right;
            color: #666;
            font-size: 18px;
            margin-right: 60px;
          }
          .cartaontrol-wrapper {
            display: inline-block;
            float: right;
            line-height: 60px;
            .cartcontrol {
              font-size: 0;
              .cart-decrease {
                vertical-align: top;
                display: inline-block;
                padding: 0 6px;
                transition: all 0.4s linear;
                &.move-enter-to {
                  opacity: 1;
                  transform: translate3D(0, 0, 0);
                }
                .inner {
                  transition: all 0.4s linear;
                  transform: rotate(0);
                }
                &.move-enter, &.move-leave-to {
                  opacity: 0;
                  transform: translate3D(24px, 0, 0);
                  .inner {
                    transform: rotate(180deg);
                  }
                }
              }
              .cart-count {
                vertical-align: middle;
                display: inline-block;
                /*width: 24px;*/
                /*text-align: center;*/
                line-height: 20px;
                font-size: 16px;
                color: #333;
              }
              .cart-add {
                vertical-align: top;
                display: inline-block;
                padding: 0 6px;
              }
            }
          }
        }
      }
    }
    .foot-wrapper {
      display: flex;
      position: fixed;
      width: 100%;
      bottom: 0;
      left: 0;
      height: 48px;
      border-top: 1px solid #efefef;
      font-size: 18px;
      line-height: 48px;
      .price-wrapper {
        flex: 1;
        display: inline-block;
        text-align: center;
        .price {
          color: #f76763;
          font-weight: 700;
        }
      }
      .continue-order {
        flex: 0 0 105px;
        display: inline-block;
        text-align: center;
        background: #fde6e6;
        color: #f76763;
      }
      .order-btn {
        flex: 0 0 105px;
        display: inline-block;
        text-align: center;
        background: #ccc;
        color: #fff;
        &.can-next {
          background: #f76763;
        }
      }
    }
    .choose-num {
      position: fixed;
      bottom: -400px;
      left: 0;
      z-index: 3;
      width: 100%;
      background-color: #fff;
      transition: bottom 0.7s;
      -moz-transition: bottom 0.7s;
      -webkit-transition: bottom 0.7s;
      &.choosenum {
        bottom: 0 !important;
      }
      .num-content {
        height: 200px;
        line-height: 100px;
        text-align: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /*overflow: auto;*/
        .num {
          height: 50px;
          line-height: 50px;
          text-align: center;
          font-size: 16px;
          color: #333;
          font-weight: 700;
          border-bottom: 1px solid #e2e2e2;
          &.num-on-class {
            background: #eee;
            color: #f76763;
          }
        }
      }
      .ok {
        height: 48px;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        color: #fff;
        background: #f76763;
      }
    }
    .list-mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      /*opacity: 0.9;*/
      background: rgba(76, 76, 76, 0.9);
    }
    .cant-click {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-top: 200px;
      font-size: 30px;
      text-align: center;
      color: #ccc;
      z-index: 2000;
      background: rgba(76, 76, 76, 0.9);
    }
    .success {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding-left: 50%;
      z-index: 2;
      /*opacity: 0.9;*/
      background: rgba(76, 76, 76, 0.9);
      .status {
        width: 60%;
        height: 150px;
        margin-left: -30%;
        margin-top: 150px;
        border-radius: 10px;
        font-size: 24px;
        color: #333;
        background: url('../assets/success.png') no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        .status_desc {
          height: 50px;
          line-height: 50px;
          text-align: center;
          padding-top: 85px;
        }
      }
      .delete1 {
        width: 10%;
        height: 60px;
        margin-left: -5%;
        background: url('../assets/delete1.png') no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
      }
    }
  }
</style>
